<template>
  <template v-if="$cfg.mobile == true">
    <template v-if="props.vant != null">
      <van-tabs
        class="bottom_tab"
        :active="value"
        :ellipsis="false"
        swipeable
        @click-tab="tabhand_van"
      >
        <van-tab v-for="item in list" :name="item.name" :title="item.title">
          <component :is="props.vant[item.name]" />
        </van-tab>
      </van-tabs>
    </template>
    <template v-else>
      <van-tabs
        class="bottom_tab"
        :active="value"
        line-height="1"
        :ellipsis="false"
        @click-tab="tabhand_van"
      >
        <van-tab v-for="(item, key) in list" :name="item.name" :title="item.title">
          <template #title>
            <template v-if="item.tablist != null">
              <div @click="val.select[item.title] = true">
                <van-icon name="wap-nav" /> {{ item.title }}
              </div>

              <van-action-sheet
                teleport="body"
                close-on-click-action
                cancel-text="取消"
                :actions="item.tablist"
                @select="tabhand_van"
                v-model:show="val.select[item.title]"
              />
            </template>
            <template v-else>
              {{ item.title }}
            </template>
          </template>
        </van-tab>
      </van-tabs>
    </template>
    <div style="margin-top: 0.05em"></div>
  </template>
  <template v-else>
    <n-tabs
      :bar-width="0"
      :value="value"
      :default-value="value"
      @update:value="tabhand"
      class="auto_tabs"
      justify-content="center"
      animated
    >
      <template v-if="props.suffix == true" #suffix>
        <n-popover raw :show-arrow="false" placement="bottom-end" :delay="0">
          <template #trigger>
            <n-icon size="25">
              <svg
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 512 512"
                enable-background="new 0 0 512 512"
                xml:space="preserve"
              >
                <g>
                  <g>
                    <path
                      d="M64,384h384v-42.666H64V384z M64,277.334h384v-42.667H64V277.334z M64,128v42.665h384V128H64z"
                    ></path>
                  </g>
                </g></svg
            ></n-icon>
          </template>
          <div class="suffix">
            <div class="__i1" v-for="item in list">
              <div class="__title">{{ item.title }}类</div>
              <template v-for="item2 in item.tablist">
                <div class="__i2" @click="tabhand(item2.key)">{{ item2.name }}</div>
              </template>
            </div>
          </div>
        </n-popover>
      </template>
      <template v-for="item in list">
        <template v-if="item.tablist != null">
          <template v-if="item.pcshow == true">
            <n-tab :name="item2.key" v-for="item2 in item.tablist">
              <div>{{ item2.name }}</div>
            </n-tab>
          </template>
          <template v-else>
            <n-tab>
              <n-dropdown trigger="hover" :options="item.tablist" @select="tabhand">
                <div><span style="padding-right: 5px">≡</span>{{ item.title }}</div>
              </n-dropdown>
            </n-tab>
          </template>
        </template>
        <template v-else>
          <n-tab :name="item.name">
            <div>{{ item.title }}</div>
          </n-tab>
        </template>
      </template>
    </n-tabs>
  </template>
</template>
<style scoped>
.suffix {
  background-color: var(--bg-dark);
  color: var(--c2);
  padding: 12px;
  width: 350px;
  backdrop-filter: blur(3px);
  box-shadow: 0 0 3px #000;
  gap: 12px;
  display: flex;
  flex-direction: column;
}
.suffix .__i2 {
  background-color: var(--bg4);
  padding: 8px;
  font-size: 12px;
  color: var(--c4);
}
.suffix .__i1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.suffix .__title {
  width: 100%;
  text-align: center;
}
</style>
<script>
export default {
  props: {
    suffix: {
      type: Boolean,
      required: false,
    },
    vant: {
      type: Object,
      required: false,
    },
    list: {
      type: Array,
      required: true,
    },
    data: {
      type: Object,
      required: false,
    },
    value: {
      type: String,
      required: false,
    },
  },
  setup(props, { emit }) {
    const val = reactive({
      select: {},
    });
    const tabhand = (ck) => {
      if (ck == undefined) {
        return false;
      }
      emit("update:value", ck, props.data ?? {});
    };
    const tabhand_van = (ck) => {
      if (ck.name >= 0) {
        return;
      }
      if (ck.key != null) {
        emit("update:value", ck.key, props.data ?? {});
        return;
      }
      emit("update:value", ck.name, props.data ?? {});
    };
    return { val, props, tabhand, tabhand_van };
  },
};
</script>
